<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    select{
      margin-right: 10px;
      padding: 8px 12px;
      border-radius: 4px;
      border: 1px solid #ccc;
      font-family: inherit;
      font-size: inherit;
    }
  </style>
</head>
<body>
  
<div id="checkCity">

</div>

  <script>
  var citys = [
    { id:1,
      name:'浙江省',
      children: [
        { id: 11, name:'杭州市', 
          children: [
            {id:111, name: '滨江区'},
            {id:112, name: '拱墅区'},
            {id:113, name: '西湖区'}
          ]
        },
        { id: 12, name:'宁波市'},
        { id: 13, name:'温州市',
          children: [
            {id:111, name: '鹿城区'},
            {id:112, name: '龙湾区'},
            {id:113, name: '洞头区'}
          ]
        }
      ],
    },
    {
      id:2,
      name:'江西省',
      children: [
        { id: 21, 
          name:'南昌市',
          children: [
            {
              id:111, 
              name: '高新区',
              children: [
                { id:11, name: '艾溪湖',
                  children: [
                    {id:111, name:'昌东村'}
                  ]
                },
                { id:12, name: '瑶湖'}
              ]
            },
            {id:112, name: '青山湖区'},
            {id:113, name: '西湖区'}
          ]
        },
        { 
          id: 12, 
          name:'九江市',
          children: [
            {id:111, name: '浔阳区'},
            {id:112, name: '庐山区'},
            {id:113, name: '柴桑区'}
          ]
        },
        { 
          id: 13, 
          name:'上饶市',
          children: [
            {id:111, name: '信江区'},
            {id:112, name: '广丰区'},
            {id:113, name: '弋阳县'}
          ]
        }
      ],
    }
  ];

  showOptions( '#checkCity', citys );

  function showOptions( selector, data ){

    var el = document.querySelector( selector );

    var select = document.createElement('select');
    var firstOption = document.createElement('option');
    firstOption.innerText='请选择';
    select.append(firstOption);


    for(var i=0;i<data.length;i++){
      var option = document.createElement('option');
      option.value = data[i].id;
      option.innerText = data[i].name;
      select.append(option);
    }

    select.onchange = function(){
      var index = this.selectedIndex - 1;
      nextAll( this ).forEach(function(select){
        select.remove();
      })

      if(index === -1 ) return;
      var children = data[index].children;
      if (!children || !children.length) return;

      showOptions( selector, children );
      
    }

    el.append(select);

  }

  function nextAll( el ){
    var result = [];
    var next = el;
    while( next = next.nextElementSibling ){
      result.push (next );
    }
    return result;
  }

  </script>
</body>
</html>